<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.Title"
                placeholder="Title"
                style="width: 200px;"
                class="filter-item"
                @keyup.enter.native="handleFilter" />
      <el-button type="primary"
                 size="small"
                 @click="handleFilter">
        搜索
      </el-button>
    </div>

    <el-table v-loading="listLoading"
              :data="list"
              element-loading-text="正在加载"
              border
              stripe
              fit
              highlight-current-row
              @sort-change="sortChange">

      <el-table-column align="center"
                       label="ID"
                       width="95">
        <template slot-scope="scope">
          {{ scope.row.Id }}
        </template>
      </el-table-column>
      <el-table-column label="Title">
        <template slot-scope="scope">
          {{ scope.row.Title }}
        </template>
      </el-table-column>
      <el-table-column label="Sort"
                       prop="Sort"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.Sort }}
        </template>
      </el-table-column>
      <el-table-column label="Date"
                       prop="Date"
                       sortable>
        <template slot-scope="scope">
          {{ scope.row.Date }}
        </template>
      </el-table-column>

    </el-table>

    <div class="pagination-container">
      <el-pagination background
                     layout='prev, pager, next, jumper, ->, total'
                     :total="listTotal"
                     :current-page="listQuery.CurrentPage"
                     :page-size="listQuery.PageSize"
                     @current-change="currentChange">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { getList, testAdmin } from '@/api/table'
export default {
  data () {
    return {
      list: null,
      listLoading: true,
      listTotal: 0,
      listQuery: {
        Title: '',

        SortBy: '',
        Order: '',

        PageSize: 14,
        CurrentPage: 1,
      }
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.loadData()
    },
    loadData () {
      let that = this
      this.listLoading = true
      getList(this.listQuery).then(response => {

        let { Data } = response
        let { Paging } = Data

        // 数据
        that.list = Data.List

        // 总数
        that.listTotal = Data.Total

        // 自动纠正页码
        that.listQuery.PageSize = Paging.PageSize
        that.listQuery.CurrentPage = Paging.CurrentPage

        that.listLoading = false
      })
    },
    currentChange (current_page) {
      this.listQuery.CurrentPage = current_page
      this.loadData()
    },
    handleFilter () {
      this.listQuery.CurrentPage = 1
      this.loadData()
    },
    sortChange (sort) {
      console.log(sort.order);

      this.listQuery.SortBy = sort.prop
      this.listQuery.Order = sort.order

      this.loadData()
    },
    handleAdmin () {
      testAdmin().then(response => {
        alert(response.Message)
      })
    }
  }
}
</script>

<style scoped>
.pagination-container {
  margin: 20px 00px 0px 0px;
}
</style>
